<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true">

      <el-form-item prop="title" :label="$t('query.deviceImei')">
        <el-autocomplete v-model.trim="queryParams.deviceId"
                         :placeholder="$t('query.placeholder.deviceImei')"
                         class="inline-input"
                         :fetch-suggestions="queryDevice"
                         :trigger-on-focus="false"
                         style="width: 350px;"
                         :maxlength="80"
                         size="small">
        </el-autocomplete>
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" v-hasPermi="['data:lastAttribute:query']"
                   v-loading="loading" @click="handleQuery">
          {{$t('query.search')}}
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-popconfirm
          v-hasPermi="['data:lastAttribute:disconnect']"
          :confirm-button-text="$t('query.confirm')"
          :cancel-button-text="$t('query.cancel')"
          icon="el-icon-info"
          icon-color="red"
          @confirm="disconnect"
          :title="$t('query.lastAttribute.ifForceOffline')">
          <el-button slot="reference" type="danger" size="mini">
            {{$t('query.lastAttribute.disconnect')}}
          </el-button>
        </el-popconfirm>
      </el-form-item>

      <el-form-item>
        <el-popconfirm
          v-hasPermi="['data:lastAttribute:clear']"
          :confirm-button-text="$t('query.confirm')"
          :cancel-button-text="$t('query.cancel')"
          icon="el-icon-info"
          icon-color="red"
          @confirm="clearVersionFileCache"
          :title="$t('query.lastAttribute.ifClearCache')">
          <el-button slot="reference" type="danger" size="mini" >
            {{$t('query.lastAttribute.clearCache')}}
          </el-button>
        </el-popconfirm>
      </el-form-item>

    </el-form>

    <div class="app-content-data">
      <el-divider content-position="left"><h3><strong>{{$t('query.lastAttribute.vehicleOnlineInfo')}}</strong></h3></el-divider>
      <div class="online-header">
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.deviceId')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.deviceId"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.online')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="getOnline(onlineData.online)"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.maxOnlineCount')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.maxOnlineCount"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.onlineTotal')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.onlineTotal"></span>
        </div>

        <div class="content" v-if="this.onlineData.online === 1">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.channel')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.channel"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.protocolVersion')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.protocolVersion"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.mcuHardwareVersion')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.mcuHardwareVersion"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.mcuSoftVersion')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.mcuSoftVersion"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.modemSoftVersion')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.modemSoftVersion"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.modemHardVersion')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.modemHardVersion"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.key')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="onlineData.key"></span>
        </div>
        <div class="content">
          <span class="left">{{$t('query.lastAttribute.onlineInfo.mqtt')}}{{$t('query.lastAttribute.contentSeparate')}}</span>
          <span class="right" v-text="isMqtt(onlineData.mqtt)"></span>
        </div>
      </div>

      <br><br>

      <el-divider content-position="left"><h3><strong>{{$t('query.lastAttribute.currentAttribute')}}</strong></h3></el-divider>
      <div v-if="dataList.length > 0">
         <span v-for="(item,index) in dataList" class="content-tag">
          <el-tag type="success">
            <span v-text="getData(item)"></span>
          </el-tag>
         </span>
      </div>
      <div v-else style="font-size: 14px;color: red;">
        {{$t('query.lastAttribute.noCurrentAttribute')}}
      </div>

      <br><br>

      <el-divider content-position="left"><h3><strong>{{$t('query.lastAttribute.lastGpsInfo')}}</strong></h3></el-divider>
      <div v-if="gpsData !== null">
        <el-row>
        <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.locationSource')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
        <el-col :span="12"><div class="grid-content" v-text="locationSourceFormat(gpsData.locationSource)"></div></el-col>
      </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.dataValidity')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="dataValidityFormat(gpsData.dataValidity)"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.longitudeSign')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="longitudeSignFormat(gpsData.longitudeSign)"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.latitudeSign')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="latitudeSignFormat(gpsData.latitudeSign)"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.satelliteNumber')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="gpsData.satelliteNumber"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.longitude')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="gpsData.longitude"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.latitude')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="gpsData.latitude"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.height')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="gpsData.height"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.gpsSpeed')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="gpsData.gpsSpeed"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="dialog-left-text grid-content">{{$t('query.gps.course')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="12"><div class="grid-content" v-text="gpsData.course"></div></el-col>
        </el-row>
      </div>
      <div v-else style="font-size: 14px;color: red;">
        {{$t('query.lastAttribute.noLastGpsInfo')}}
      </div>

      <br><br>

      <el-divider content-position="left"><h3><strong>
        {{$t('query.lastAttribute.lBatteryLow')}}
        <el-tooltip class="item" effect="dark" placement="top-start"
                    content="0:ON  1:OFF">
          <i class="el-icon-question" />
        </el-tooltip>
      </strong></h3></el-divider>
      <div v-if="batteryLowFrequencyL !== null">
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-top grid-content-left">
            {{$t('query.battery.batteryLowHigh.dischargePortDischargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}
            <el-tooltip class="item" effect="dark" placement="top-start"
                        content="0:ON 1:OFF">
              <i class="el-icon-question" />
            </el-tooltip>
          </div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-top">{{batteryLowFrequencyL.dischargePortDischargeMosStatus}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-top grid-content-right">{{$t('query.battery.batteryLowHigh.dischargePortChargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-top">{{batteryLowFrequencyL.dischargePortChargeMosStatus}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.chargePortDischargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.chargePortDischargeMosStatus}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.chargePortChargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.chargePortChargeMosStatus}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.preMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.preMosStatus}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.parallelPackageFaults')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.parallelPackageFaults}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.packCurrent')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packCurrent}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.energyFeedbackCmd')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.energyFeedbackCmd}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.underVoltageBattery')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.underVoltageBattery}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.maximumDischargeTime')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.maximumDischargeTime}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.longDischargeTime')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.longDischargeTime}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.longChargeTime')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.longChargeTime}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">
            {{$t('query.battery.batteryLowHigh.otaMode')}}{{$t('query.lastAttribute.contentSeparate')}}
            <el-tooltip class="item" effect="dark" placement="top-start"
                        :content="$t('query.battery.batteryLowHigh.otaModeContent')">
              <i class="el-icon-question" />
            </el-tooltip>
          </div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.otaMode}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packMaxChargeVoltage')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packMaxChargeVoltage}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.packMaxChargeCurrent')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packMaxChargeCurrent}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packMinChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packMinChargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.packMaxChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packMaxChargeTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packMinChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packMinChargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">
            {{$t('query.battery.batteryLowHigh.chargeInfoCheck')}}{{$t('query.lastAttribute.contentSeparate')}}
            <el-tooltip class="item" effect="dark" placement="top-start"
                        :content="$t('query.battery.batteryLowHigh.chargeInfoCheckContent')">
              <i class="el-icon-question" />
            </el-tooltip>
          </div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.chargeInfoCheck}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.coreMaxTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.coreMaxTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.coreMinTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.coreMinTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packEvnTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.packEvnTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.dischargeMosChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.dischargeMosChargeTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.dischargeMosDischargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.dischargeMosDischargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.chargeMosChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.chargeMosChargeTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.chargeMosDischargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.chargeMosDischargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.preMosTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyL.preMosTemp}}</div></el-col>
        </el-row>
      </div>
      <div v-else style="font-size: 14px;color: red;">
        {{$t('query.lastAttribute.nolBatteryLow')}}
      </div>

      <br><br>

      <el-divider content-position="left"><h3><strong>
        {{$t('query.lastAttribute.hBatteryLow')}}
        <el-tooltip class="item" effect="dark" placement="top-start"
                    content="0:ON  1:OFF">
          <i class="el-icon-question" />
        </el-tooltip>
      </strong></h3></el-divider>
      <div v-if="batteryLowFrequencyH !== null">
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-top grid-content-left">
            {{$t('query.battery.batteryLowHigh.dischargePortDischargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}
            <el-tooltip class="item" effect="dark" placement="top-start"
                        content="0:ON 1:OFF">
              <i class="el-icon-question" />
            </el-tooltip>
          </div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-top">{{batteryLowFrequencyH.dischargePortDischargeMosStatus}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-top grid-content-right">{{$t('query.battery.batteryLowHigh.dischargePortChargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-top">{{batteryLowFrequencyH.dischargePortChargeMosStatus}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.chargePortDischargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.chargePortDischargeMosStatus}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.chargePortChargeMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.chargePortChargeMosStatus}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.preMosStatus')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.preMosStatus}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.parallelPackageFaults')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.parallelPackageFaults}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.packCurrent')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packCurrent}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.energyFeedbackCmd')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.energyFeedbackCmd}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.underVoltageBattery')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.underVoltageBattery}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.maximumDischargeTime')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.maximumDischargeTime}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.longDischargeTime')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.longDischargeTime}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.longChargeTime')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.longChargeTime}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">
            {{$t('query.battery.batteryLowHigh.otaMode')}}
            <el-tooltip class="item" effect="dark" placement="top-start"
                        :content="$t('query.battery.batteryLowHigh.otaModeContent')">
              <i class="el-icon-question" />
            </el-tooltip>
          </div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.otaMode}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packMaxChargeVoltage')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packMaxChargeVoltage}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.packMaxChargeCurrent')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packMaxChargeCurrent}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packMinChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packMinChargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.packMaxChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packMaxChargeTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packMinChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packMinChargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">
            {{$t('query.battery.batteryLowHigh.chargeInfoCheck')}}
            <el-tooltip class="item" effect="dark" placement="top-start"
                        :content="$t('query.battery.batteryLowHigh.chargeInfoCheckContent')">
              <i class="el-icon-question" />
            </el-tooltip>
          </div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.chargeInfoCheck}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.coreMaxTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.coreMaxTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.coreMinTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.coreMinTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.packEvnTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.packEvnTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.dischargeMosChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.dischargeMosChargeTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.dischargeMosDischargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.dischargeMosDischargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.chargeMosChargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.chargeMosChargeTemp}}</div></el-col>
          <el-col :span="6"><div class="grid-content grid-content-right">{{$t('query.battery.batteryLowHigh.chargeMosDischargeTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.chargeMosDischargeTemp}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content grid-content-left">{{$t('query.battery.batteryLowHigh.preMosTemp')}}{{$t('query.lastAttribute.contentSeparate')}}</div></el-col>
          <el-col :span="6"><div class="grid-content">{{batteryLowFrequencyH.preMosTemp}}</div></el-col>
        </el-row>
      </div>
      <div v-else style="font-size: 14px;color: red;">
        {{$t('query.lastAttribute.nohBatteryLow')}}
      </div>

      <br><br>

      <el-divider content-position="left"><h3><strong>
        {{$t('query.lastAttribute.bodyFault')}}
        <el-tooltip class="item" effect="dark" placement="top-start"
                    :content="$t('query.lastAttribute.bodyFaultContent')">
          <i class="el-icon-question" />
        </el-tooltip>
      </strong></h3></el-divider>
      <div v-if="bodyFaultCode !== null">
        <span v-if="bodyFaultCode.faultData.length > 0">
             <span v-for="(item,index) in bodyFaultCode.faultData" class="content-tag">
                <el-tag type="success">
                  <span v-text="item"></span>
                </el-tag>
             </span>
          </span>
        <span v-else style="color: green;">无故障</span>
      </div>
      <div v-else style="font-size: 14px;color: red;">
        {{$t('query.lastAttribute.noBodyFault')}}
      </div>

    </div>

  </div>
</template>

<script>
import { queryDeviceIdAsync } from '@/api/query/device'
import { online, attributes, disconnect, clearVersionFileCache, lastGps, lastBatteryLowFrequencyL, lastBatteryLowFrequencyH, lastBodyFaultCode } from '@/api/query/lastAttribute'
import {ATTRIBUTE_NAMES} from "@/api/query/lastAttribute"

export default {
  name: 'index',
  data() {
    return {
      queryParams: {
        deviceId: null,
      },
      source: null,
      loading: false,

      attributeNames: [],
      mtAttributeNames: [],

      recordTime: 0,

      dataList: [],

      onlineData: {
        online: 0,
        maxOnlineCount: undefined,
        onlineTotal: undefined,
        mcuSoftVersion: '',
        modemSoftVersion: '',
        modemHardVersion: '',
        key: '',
        mqtt: '',
      },

      gpsData: null,
      batteryLowFrequencyL: null,
      batteryLowFrequencyH: null,
      bodyFaultCode: null,

      attributeNameOption: ATTRIBUTE_NAMES
    }
  },

  methods: {
    disconnect() {
      if (!this.validInput()) {
        return
      }

      if (this.onlineData.online !== 1) {
        this.$message({
          showClose: true,
          duration: 1000,
          message: this.$t('query.lastAttribute.deviceOffline'),
          type: 'warning'
        })
        return
      }

      disconnect(this.onlineData.deviceId).then(res => {
        if (res && res.code === 200) {
          this.$message({
            showClose: true,
            duration: 1000,
            message: this.$t('query.lastAttribute.forceOfflineSuccess'),
            type: 'success'
          })
          this.handleQuery()
        }
      })
    },

    clearVersionFileCache() {
      clearVersionFileCache().then(res => {
        if (res && res.code === 200) {
          this.$message({
            showClose: true,
            duration: 1000,
            message: this.$t('query.lastAttribute.clearCacheSuccess'),
            type: 'success'
          })
        }
      })
    },

    locationSourceFormat(data) {
      switch (data) {
        case 0:
          return "GPS"
        case 1:
          return "GSM"
        default:
          return data
      }
    },
    dataValidityFormat(data) {
      switch (data) {
        case 0:
          return this.$t('query.gps.realTime')
        case 1:
          return this.$t('query.gps.lastTime')
        default:
          return data
      }
    },
    longitudeSignFormat(data) {
      switch (data) {
        case 0:
          return this.$t('query.gps.eastLongitude')
        case 1:
          return this.$t('query.gps.westLongitude')
        default:
          return data
      }
    },
    latitudeSignFormat(data) {
      switch (data) {
        case 0:
          return this.$t('query.gps.southLatitude')
        case 1:
          return this.$t('query.gps.northLatitude')
        default:
          return data
      }
    },

    queryDevice(suffix, cb) {
      let form = { deviceId: suffix, source: this.source }
      queryDeviceIdAsync(form, cb)
    },

    getOnline(online) {
      if (online === 1) {
        return 'online'
      } else if (online === 2) {
        return 'offline'
      } else {
        return ''
      }
    },

    isMqtt(bol) {
      if (bol) {
        return 'Y'
      } else {
        return 'N'
      }
    },

    handleQuery() {
      if (!this.validInput()) {
        return
      }
      this.loading = true

      online(this.queryParams.deviceId).then(res => {
        if (res && res.code === 200) {
          this.onlineData = JSON.parse(res.data)
        }
      })
      attributes(this.queryParams.deviceId).then(res => {
        this.recordTime = res.data.recordTime
        this.dataList = res.data.keyValues
      })
      lastGps(this.queryParams.deviceId).then(res => {
        this.gpsData = res.data
      })
      lastBatteryLowFrequencyL(this.queryParams.deviceId).then(res => {
        this.batteryLowFrequencyL = res.data
      })
      lastBatteryLowFrequencyH(this.queryParams.deviceId).then(res => {
        this.batteryLowFrequencyH = res.data
      })
      lastBodyFaultCode(this.queryParams.deviceId).then(res => {
        this.bodyFaultCode = res.data
      })
      this.loading = false
    },

    validInput() {
      if (this.queryParams.deviceId === '' || this.queryParams.deviceId === undefined
        || this.queryParams.deviceId === null) {
        this.$message({
          showClose: true,
          duration: 1000,
          message: this.$t('query.inputDeviceNumber'),
          type: 'warning'
        })
        return false
      }

      return true
    },

    getData(data) {
      return this.getAttributeData(data)
    },

    getAttribute(key) {
      for (let i = 0; i < this.attributeNameOption.length; i++) {
        if (this.attributeNameOption[i].value === key) {
          return this.attributeNameOption[i].label
          break;
        }
      }
      return key
    },

    getAttributeData(data) {
      return this.getAttribute(data.key) + ' | ' + data.value
    },

  }

}
</script>

<style lang="scss" scoped>
.grid-content {
  border: 1px solid #e3dddd;
  border-top: none;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 20px;
}

.grid-content-top {
  border-top: 1px solid #e3dddd;
}

.grid-content-left {
  border-right: none;
  text-align: right;
  padding-right: 30px;
  font-weight: bold;
}

.grid-content-right {
  border-left: none;
  border-right: none;
  text-align: right;
  padding-right: 30px;
  font-weight: bold;
}

.app-content-data {
  width: 100%;
  min-height: 500px;
  border: 1px solid #e3dddd;
  border-radius: 5px;
  padding: 50px;

  .online-header {
    width: 750px;
    display: inline-grid;
    padding-top: 10px;
    padding-left: 30px;
    font-size: 14px;

    .content {
      .left {
        font-weight: bold;
        height: 40px;
        line-height: 40px;
      }

      .right {
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
      }
    }
  }

  .content-online {
    margin-bottom: 100px;
  }

  .content-tag {
  }
}

.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

</style>
